<template>
  <el-dialog v-model="dialogVisible" title="个人信息" width="560px" draggable>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="70px">
      <el-form-item label="头像" prop="avatar">
        <UploadImg v-model:image-url="ruleForm.avatar" width="135px" height="135px" :file-size="3">
          <template #empty>
            <el-icon><Avatar /></el-icon>
            <span>请上传头像</span>
          </template>
          <template #tip> 头像大小不能超过 3M </template>
        </UploadImg>
      </el-form-item>
      <el-form-item label="用户名" prop="nickName">
        <el-input v-model="ruleForm.nickName" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="ruleForm.sex" placeholder="选择性别">
          <el-option label="男" :value="1" />
          <el-option label="女" :value="2" />
          <el-option label="未知" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="真实姓名" prop="trueName">
        <el-input v-model="ruleForm.trueName" />
      </el-form-item>
      <el-form-item label="简介" prop="introduction">
        <el-input v-model="ruleForm.introduction" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
// import { useUserStore } from "@/stores/modules/user";
import { checkPhoneNumber } from "@/utils/eleValidate";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import UploadImg from "@/components/Upload/Img.vue";
import { GetEditUserInfo, EditLoginUserInfo } from "@/api/modules/user";

// const userStore = useUserStore();
// const userInfo = computed(() => userStore.userInfo);

const dialogVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
const emits = defineEmits(["setuse"]);
const ruleForm = reactive({
  nickName: "",
  phone: "",
  trueName: "",
  sex: 1,
  avatar: "",
  idCard: "",
  introduction: "",
  id: 0,
  loginRoleCategoryId: 0
});

const openDialog = () => {
  // console.log("userinfo", userInfo.value);
  GetEditUserInfo().then(res => {
    const userInfo: any = res.data;
    ruleForm.nickName = userInfo.nickName;
    ruleForm.phone = userInfo.phone;
    ruleForm.trueName = userInfo.trueName;
    ruleForm.sex = userInfo.sex;
    ruleForm.avatar = userInfo.avatar;
    ruleForm.idCard = userInfo.idCard;
    ruleForm.introduction = userInfo.introduction;
    ruleForm.loginRoleCategoryId = userInfo.loginRoleCategoryId;
    ruleForm.id = userInfo.id;
  });
  dialogVisible.value = true;
};

const rules = reactive<FormRules>({
  nickName: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 2, max: 5, message: "长度2-5个字符", trigger: "blur" }
  ],
  phone: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      EditLoginUserInfo(ruleForm).then(() => {
        ElMessage({
          message: "修改成功",
          grouping: true,
          type: "success"
        });
        emits("setuse", ruleForm);
        dialogVisible.value = false;
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  dialogVisible.value = false;
};

defineExpose({ openDialog });
</script>
